/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '星胖胖'   //参数s
function getBooks() {
    axios({   //获取数据  get 请求
        url: 'http://hmajax.itheima.net/api/books',
        // 默认get请求  params
        params: {
            creator
        }
    }).then(res => {
        console.log(res.data.data);
        const list = res.data.data
        const newList = list.map(function ({ id, bookname, author, publisher }, index) {
            return `
          <tr>
          <td>${index + 1}</td>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td>
            <span class="del" data-index='${index}'>删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
            `
        })
        document.querySelector('.list').innerHTML = newList.join('')

    })
} getBooks()


/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
const add = document.querySelector('.add-modal')
const modal = new bootstrap.Modal(add)
document.querySelector('.add-btn').addEventListener('click', function () {
    //得到表单里面的数据利用serialize  serialize
    const addfrom = document.querySelector('.add-form')
    const list = serialize(addfrom, { hash: true, empty: flase })
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'POST',
        data: { ...addfrom, creator }
    }).then(res => {
        //清空表单
        addfrom.reset()
        getBooks()
        modal.hide()

    }).catch(err => { console.log(err); })

})






/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */




/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */

